<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>slidem</title>
    <style>
        html,body{
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        .slideout{
            height: var(--w, 300px);
            position: relative;
        }
        .slidec{
            width: 101%;
            height: 100%;
            --n: var(--num);
            display: flex;
            background: #416A7F;
            overflow: hidden;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            animation: slide var(--interval) linear infinite;
        }
        .slidec::-webkit-scrollbar {
            display: none;
        }
        .slide-item{
            width: 100%;
            scroll-snap-align: center;
            flex: none;
            background: none no-repeat center/contain;
        }
        @keyframes slide {
            100% {
                transform: translateZ(.1px);
            }
        }
        .slide-dotc{
            width: 100px;
            height: 27px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, .1);
            border-radius: 10px;
            list-style: none;
            margin: 0;
            padding: 0 15px;
            display: flex;
            box-sizing: border-box;
        }
        .slide-dot{
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .slide-dot::after{
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
        }
        .slide-dot.cur::after{
            background: #ff5000;
        }
    </style>
</head>
<body>
    <div class="slideout">
        <div class="slidec">
        </div>
        <ul class="slide-dotc"></ul>
    </div>
    <script>
        //缺陷 touchend 无法准确切换cur
        class slide{
            constructor(urls){
                this.out = document.querySelector('.slideout');
                this.con = document.querySelector('.slidec');
                this.dotc = document.querySelector('.slide-dotc');
                this.urls = urls;
                this.num = urls.length;

                this.init();
            }
            init(){
                let urls = this.urls;

                // urls = [urls[this.num-1], ...urls, urls[0]];
                let slideTpl = urls.map((t,i) => {
                    let slideItemCls = i < 1 ? 'slide-item cur' : 'slide-item';
                    return `<a style="background-image: url(${t})" href="javascript:;" i="${i}" class="${slideItemCls}" class="slide-link"></a>`
                }).join('');
                this.con.innerHTML = slideTpl;

                let dotTpl = urls.map((t,i) => {
                    return `<li i="${i}" class="slide-dot"></li>`
                }).join('');
                this.dotc.innerHTML = dotTpl;

                this.con.style.setProperty('--num', this.num);
                this.con.style.setProperty('--interval', '3s');

                let sw = this.con.scrollWidth;
                let cur = 1;
                this.setCur(1);

                this.con.addEventListener("animationiteration", () => {
                    cur += 1;
                    if(cur > this.num){
                        cur = 1;
                    }
                    this.setCur(cur);
                    this.con.scrollLeft = sw * (cur-1) / this.num;
                });

                this.con.addEventListener("touchstart", () => {
                    console.log('touchstart');
                    this.con.style.animationPlayState = 'paused';
                });

                this.con.addEventListener("touchend", () => {
                    console.log('touchend');
                    this.con.style.animationPlayState = 'unset';
                });
            }
            setCur(cur){
                this.con.style.setProperty('--cur', cur);
                this.con.querySelector('.cur')?.classList.remove('cur');
                this.con.children[cur-1]?.classList.add('cur');
                this.dotc.querySelector('.cur')?.classList.remove('cur');
                this.dotc.children[cur-1]?.classList.add('cur');
            }
        }

        let urls = [
            "https://img.alicdn.com/imgextra/i1/6000000004995/O1CN01C6bfox1mllHPXxQnO_!!6000000004995-0-octopus.jpg",
            "https://img.alicdn.com/imgextra/i4/O1CN01GOlEEW1zidUliI8O7_!!6000000006748-2-tps-846-472.png",
            "https://img.alicdn.com/imgextra/i4/O1CN01LHWdyp1yvAidcNMDR_!!6000000006640-0-tps-846-472.jpg",
            "https://img.alicdn.com/imgextra/i4/O1CN01aTXsri1my7yg4CMpt_!!6000000005022-0-tps-846-472.jpg",
        ];

        new slide(urls);
    </script>
</body>
</html>

